<template>
  <AnimatePresence>
    <!-- 顶部进度条 -->
    <TopProgress v-if="sysStore.isProcess"></TopProgress>
    <!-- 加载层 -->
    <Motion
      style="position: fixed; z-index: 1000"
      v-if="sysStore.isLoading"
      :initial="{ opacity: 0.7 }"
      :animate="{
        opacity: [0.7, 0.8, 0.9, 1],
      }"
      :exit="{ opacity: 0 }"
      :transition="{
        duration: 0.5,
        ease: [0.25, 0.1, 0.25, 1], // 类似于 easeInOut
      }"
    >
      <LoadingLayer></LoadingLayer>
    </Motion>
    <!-- 页面层 -->
  </AnimatePresence>
  <div class="app-container">
    <LayoutPage v-if="authStore.isLogin"></LayoutPage>
    <RouterView v-else></RouterView>
  </div>
</template>

<script setup lang="ts">
import tool from "@/utils/common/index";
import LayoutPage from "@/layout/index.vue";
import { AnimatePresence, Motion } from "motion-v";
import LoadingLayer from "@/components/Loading/index.vue";
import TopProgress from "@/components/TopProgress/index.vue";
import { onMounted, watchEffect } from "vue";
import { useAuthStore, useSysStore } from "./store";
import { GetSysRouteTree } from "./api/sys/user";
import { buildRoutesFromServer } from "./utils/route";
// 系统Store
const sysStore = useSysStore();
const authStore = useAuthStore();
// 监听
watchEffect(() => {
  if (sysStore.isGrayMode) {
    document.documentElement.classList.add("gray-mode");
  } else {
    document.documentElement.classList.remove("gray-mode");
  }
  if (sysStore.isColorWeakMode) {
    document.documentElement.classList.add("colorblind-monochrome");
  } else {
    document.documentElement.classList.remove("colorblind-monochrome");
  }
  switch (sysStore.themeMode) {
    case "light": {
      document.documentElement.classList.remove("dark");
      sysStore.setIsDark(false);
      break;
    }
    case "dark": {
      document.documentElement.classList.add("dark");
      sysStore.setIsDark(true);
      break;
    }
    default: {
      // 获取当前时间
      const now = new Date();
      // 获取当前小时（24小时制）
      const currentHour = now.getHours();

      // 判断是否为白天（6:00 - 18:00）
      const isDaytime = currentHour >= 6 && currentHour < 18;
      if (!isDaytime) {
        document.documentElement.classList.add("dark");
        sysStore.setIsDark(true);
      } else {
        document.documentElement.classList.remove("dark");
        sysStore.setIsDark(false);
      }
    }
  }
});
onMounted(() => {});
</script>

<style scoped lang="scss">
.top-progress {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  height: 1px;

  :deep(.el-progress__text) {
    display: none;
  }
}
</style>
